<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // computed 典型场景：
    //  1.表单验证

    // computed: {
    //     isValid() {
    //         return this.username.length >= 6 && 
    //             /[A-Z]/.test(this.password)
    //     }
    // }

    // 2. 计算复杂数据，提高性能
    // <template>
    // <ul>
    //     <li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li>
    // </ul>
    // </template>

    // <script>
    //     export default {
    //         data() {
    //             return {
    //             users: [
    //                 { id: 1, name: "张三", active: true },
    //                 { id: 2, name: "李四", active: false },
    //                 { id: 3, name: "王五", active: true }
    //             ]
    //             };
    //         },
    //         computed: {
    //             activeUsers() {
    //                 return this.users.filter(user => user.active);
    //             }
    //         }
    //     };
    // <\/script>

    // 3. 监听 Vuex 数据的变更

    // <template>
    // <p>用户名：{{ username }}</p>
    // </template>

    // <script>
    // import { mapState } from "vuex";

    // export default {
    //     computed: {
    //         ...mapState(["username"])
    //     }
    // };
    // <//script>
    // computed 自动监听 Vuex 数据变化，无需手动更新。
    // 结合 mapState 提高代码可读性。
</script>
</html>